<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>一级路由</title>
    <script src="js/vue.js"></script>
    <script src="js/vue-router.js"></script>
    <style>
        .mlist{
            list-style-type:none;
        }
        .mlist li{
            float: left;
            width: 150px;
        }
        .mlist li a{
            text-decoration: none;
        }
        .show{
            clear: both;
            margin-top: 50px;
        }
    </style>
</head>
<body>
    <template id="t1">
        <div>
            <h1>专题直播</h1>
        </div>
    </template>
    <template id="t2">
        <div>
            <h1>精品网课</h1>
        </div>
    </template>
    <template id="t3">
        <div>
            <div>
                <ul>
                    <li><router-link to="/stkc/cd">成都校区</router-link></li>
                    <li><router-link to="/stkc/xian">西安校区</router-link></li>
                    <li><router-link to="/stkc/shanghai">上海校区</router-link></li>
                </ul>
            </div>
            <div>
                <router-view></router-view>
            </div>
        </div>
    </template>
    <template id="cdt"> 
        <div>
            <h2>成都教学视频详情</h2>
        </div>
    </template>
    <template id="xiant"> 
        <div>
            <h2>西安教学视频详情</h2>
        </div>
    </template>
    <template id="shanghait"> 
        <div>
            <h2>上海教学视频详情</h2>
        </div>
    </template>
    <div id="app">
        <div>
            <ul class="mlist">
                <li><router-link to="/ztzb">专题直播</router-link></li>
                <li><router-link to="/jpwk">精品网课</router-link></li>
                <li><router-link to="/stkc">随堂课程</router-link></li>
            </ul>
        </div>
        <div class="show">
            <!--使用router-view来承载/展示数据-->
            <router-view></router-view>
        </div>
    </div>
</body>
</html>
<script>
    var vm=new Vue({
        el:'#app',
        router:new VueRouter({
            routes: [
                {
                    path:'/ztzb',
                    component:{
                        template:'#t1'
                    }
                },
                {
                    path:'/jpwk',
                    component:{
                        template:'#t2'
                    }
                },
                {
                    path:'/stkc',
                    component:{
                        template:'#t3'
                    },
                    children:[
                        {
                            path:'cd',
                            component:{
                                template:'#cdt'
                            }
                        },
                        {
                            path:'xian',
                            component:{
                                template:'#xiant'
                            }
                        },
                        {
                            path:'shanghai',
                            component:{
                                template:'#shanghait'
                            }
                        }
                    ]
                }
            ]
        }),
        //当vue实例创建之前来加载这个函数
        beforeCreate() {
            //在路由中添加一个默认的路径
            this.$router.push('/ztzb');
        },
    });
</script>